<template>
  <div id="app">
    <div class="top">
      <div class="top-left">
        <img src="../../assets/image/bolema_logo_0923_white.png">
      </div>
      <div class="top-center">
        <Menu mode="horizontal" :theme="theme1" active-name="1">
          <MenuItem name="1">
          首页
          </MenuItem>
          <MenuItem name="2">
          班级
          </MenuItem>
          <MenuItem name="3">
          考试
          </MenuItem>
          <MenuItem name="4">
          课程
          </MenuItem>
          <MenuItem name="5">
          题库
          </MenuItem>
          <MenuItem name="6">
          上课
          </MenuItem>
          <MenuItem name="7">
          进度计划模板
          </MenuItem>
          <MenuItem name="8">
          进度计划管理
          </MenuItem>
        </Menu>
      </div>
      <div class="top-right">
        <div class="top-right-img">
          <img src="">
        </div>
        <div class="top-right-content">
          <Dropdown style="margin-left: 20px">
            <Button type="primary">
              一方通行
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>退出登录</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <div class="center-top">
      <div class="center-top-left">
        <img src="">
        <div class="text">一方通行</div>
        <div class="biaoqian">
          暂未设置个人标签
        </div>
        <div>
          <button>去上课</button>
        </div>
        <div class="center-top-left-content">
          <div class="div1">修改密码</div>
          <div class="div2">我的消息</div>
        </div>
      </div>
      <div class="center-top-right">
        <div class="center-top-right-text">
          今日授课
        </div>
        <div class="center-top-right-content">
          <div class="center-top-right-content-div1">
            2019秋_信息技术_集训_061
          </div>
          <div class="center-top-right-content-div2">
            大前端兼全栈2019定制班
          </div>
          <div class="center-top-right-content-div3">
            <span class="bt">开始上课</span>
          </div>
          <div class="triangle"></div>
        </div>
      </div>
    </div>
    <div class="center-bottom">
      <div class="center-bottom-left">
        <Menu :theme="theme1" active-name="1">
          <MenuItem name="1">
          <Icon type="ios-home-outline" />
          个人中心
          </MenuItem>
          <MenuItem name="2">
          <Icon type="ios-book" />
          添加考试
          </MenuItem>
          <MenuItem name="3">
          <Icon type="ios-bookmarks" />
          添加课程
          </MenuItem>
          <MenuItem name="4">
          <Icon type="md-albums" />
          添加模板
          </MenuItem>
          <MenuItem name="5">
          <Icon type="md-paper-plane" />
          添加计划
          </MenuItem>
          <MenuItem name="6">
          <Icon type="ios-card" />
          学习报告
          </MenuItem>
        </Menu>
      </div>
      <div class="center-bottom-right">
        <div class="center-bottom-right-div1">
          <div class="center-top-right-text">
            明日备课
          </div>
          <div class="center-bottom-right-div1-content">
            <div class="data">2020-03-07</div>
            <div class="classmessage">暂无课程信息</div>
            <div class="icon">
              <Icon type="ios-keypad-outline" />
            </div>
          </div>
        </div>
        <div class="center-bottom-right-div2">
          <div class="center-bottom-right-div2-text">
            班级管理
          </div>
        </div>
        <div class="center-bottom-right-div3">
          <div class="center-bottom-right-div3-top">
            <div class="center-bottom-right-div3-top-left">
              <div class="span">1</div>
              <div class="text">
                <span class="span1">春_信息技术_集训_069</span><br>
                <span class="span2">2020考研培训课程</span>
              </div>
            </div>
            <div class="center-bottom-right-div3-top-right">
              <ul class="ul">
                <li>
                  <p>
                    <Icon type="ios-book-outline" />
                  </p>
                  <span>去上课</span>
                </li>
                <li>
                  <p>
                    <Icon type="md-done-all" />
                  </p>
                  <span>班级态势表</span>
                </li>
                <li>
                  <p>
                    <Icon type="ios-reverse-camera-outline" />
                  </p>
                  <span>班级相册</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="center-bottom-right-div3-bottom">
            <Progress :percent="100" />
          </div>
        </div>
        <div class="center-bottom-right-div3">
          <div class="center-bottom-right-div3-top">
            <div class="center-bottom-right-div3-top-left">
              <div class="span">1</div>
              <div class="text">
                <span class="span1">春_信息技术_集训_069</span><br>
                <span class="span2">17级</span>
              </div>
            </div>
            <div class="center-bottom-right-div3-top-right">
              <ul class="ul">
                <li>
                  <p>
                    <Icon type="ios-book-outline" />
                  </p>
                  <span>去上课</span>
                </li>
                <li>
                  <p>
                    <Icon type="md-done-all" />
                  </p>
                  <span>班级态势表</span>
                </li>
                <li>
                  <p>
                    <Icon type="ios-reverse-camera-outline" />
                  </p>
                  <span>班级相册</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="center-bottom-right-div3-bottom">
            <Progress :percent="90" status="active" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      theme1: 'primary'
    }
  },
  components: {},
  mounted () {},
  methods: {}
}
</script>

<style scoped="scoped">
  @import url("../../assets/style/index.scss");
</style>
